<script lang="ts">
  import type { TodoItem } from "../../index"
  import { createEventDispatcher } from "svelte"
  export let item: TodoItem
  export let index: number

  const dispatch = createEventDispatcher()

  const removeTodo = () => {
    dispatch("removeTodoEvent", index)
  }
  const todoCheckStatusChange = () => {
    dispatch("todoCheckStatusChangeEvent")
  }
</script>

<div class="item">
  <input
    type="checkbox"
    name={item.name}
    id={item.name}
    value={item.name}
    bind:checked={item.isCheck}
    on:change={todoCheckStatusChange}
  />

  <label for={item.name}>{item.name}</label>
  <button on:click={removeTodo}>删除</button>
</div>

<style>
  button {
    margin-left: 50px;
  }

  .item {
    margin-top: 20px;
  }

  label {
    margin-left: 10px;
  }
</style>
